<template>
  <MainContentSearchBarWrapper>
      <SearchBar inline>
        <template #normal>
          <el-form-item label="分组名称">
            <el-input
              v-model="tableForm.name"
              clearable
              placeholder="请输入分组名称"
            ></el-input>
          </el-form-item>
<!--          <ins-cascader-filter @change="(value) => tableForm.insIds = value"></ins-cascader-filter>-->
        </template>

        <template #toolbar>
          <el-form-item>
            <el-button type="primary" @click="isAdd = true"
              >新建分组</el-button
            >
          </el-form-item>
        </template>
      </SearchBar>
    <LayoutTable
      ref="attributeRef"
      url="/user/tagGroupEntity/page"
      disable-auto-height
      :param="tableForm"
    >
      <el-table-column
        prop="name"
        label="分组名称"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="createUserName"
        label="创建人"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        min-width="100"
      ></el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="100">
        <template #default="scope">
          <div>
            {{ $filters.dateFormat(scope.row.createTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <div>
            <el-button
              style="margin-right: 10px"
              link
              type="primary"
              @click="toEditor(scope.row)"
              v-has="['120203']"
            >
              编辑
            </el-button>

            <el-button @click="del(scope.row)" link type="primary" v-has="['120204']"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </LayoutTable>
    <add-tag-grouop
      @confirmAdd="confirmAdd"
      @cancelAdd="cancelAdd"
      :isAdd="isAdd"
      :addData="addData"
    ></add-tag-grouop>
    <export-attribute
      @confirmExoprt="confirmExoprt"
      @cancelExport="cancelExport"
      :isExport="isExport"
    ></export-attribute>
  </MainContentSearchBarWrapper>
</template>
<script>
import CustomerApi from "@/api/customerApi";
import exportAttribute from "./exportAttribute.vue";
import addTagGrouop from "./addTagGrouop.vue";

export default {
  components: { exportAttribute, addTagGrouop },
  name: "CustomerGroupTag",
  data() {
    return {
      isExport: false,
      isAdd: false,
      addData: { id: null },
      formData: {},
      tableForm: {
        name: "",
        insIds: [],
      },
    };
  },

  methods: {
    // 添加标签
    async addUserGroup() {
      let rs = await CustomerApi.addUserGroup(this.formData);
      if (rs.code == 200) {
        ElMessage.success("添加标签成功");
        this.isAdd = false;
        this.onSearch();
      }
    },
    // 编辑标签
    toEditor(row) {
      this.isAdd = true;
      this.addData = JSON.parse(JSON.stringify(row));
      console.log("[ row ] >", row);
    },
    async delTagGroup(row) {
      let rs = await CustomerApi.delTagGroup({ id: row.id, name: row.name });
      if (rs.code == 200) {
        ElMessage.success("删除分组成功");
        this.onSearch();
      }
    },
    del(row) {
      ElMessageBox.confirm("此操作将删除该分组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delTagGroup(row);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addCustomerGroup() {},
    confirmAdd() {
      this.onSearch();
    },
    cancelAdd() {
      this.isAdd = false;
      this.addData = { id: null };
    },
    confirmExoprt() {
      this.onSearch();
      this.cancelExport();
    },
    cancelExport() {
      this.isExport = false;
    },

    resetForm() {
      this.tableForm = {
        name: "",
      };
      this.onSearch();
    },

    onSearch() {
      this.$nextTick(() => {
        this.$refs.attributeRef.search();
      });
    },
  },
  watch: {
    "tableForm.name": {
      handler(val) {
        this.onSearch();
      },
    },
  },
};
</script>

<style lang="scss" scoped></style>
